<template>
  <view class="city-explore-page">
    <!-- 7. 滚动视图：包裹所有内容，实现垂直滚动 -->
    <scroll-view scroll-y="true" style="height: 100vh;">
      <!-- 1. 顶部轮播图（替换为你的泉州图片） -->
      <swiper class="swiper" autoplay="true" interval="3000" circular="true">
        <swiper-item>
          <image src="/static/quanzhoufengguang.jpg" class="swiper-img" mode="widthFix"></image>
        </swiper-item>
        <swiper-item>
          <image src="/static/quanzhouxuanchuang.jpg" class="swiper-img" mode="widthFix"></image>
        </swiper-item>
        <!-- 若有第3张泉州图片，继续添加一个swiper-item -->
        <!-- <swiper-item>
          <image src="/static/第三张图片名.jpg" class="swiper-img" mode="widthFix"></image>
        </swiper-item> -->
      </swiper>

      <!-- 2. 城市介绍（富文本） -->
      <view class="section">
        <text class="section-title">城市介绍</text>
        <rich-text :nodes="cityIntro"></rich-text>
      </view>

      <!-- 3. 探索进度（进度条） -->
      <view class="section">
        <text class="section-title">探索进度</text>
        <progress percent="60" show-info="true" stroke-width="6"></progress>
      </view>

      <!-- 4. 城市选择（省市区选择器） -->
      <view class="section">
        <text class="section-title">城市选择</text>
        <picker mode="region" @change="onRegionChange">
          <view class="picker-view">
            当前选择：{{ province }} - {{ city }} - {{ area }}
          </view>
        </picker>
      </view>

      <!-- 5. 偏好设置（单选、开关、滑块） -->
      <view class="section">
        <text class="section-title">偏好设置</text>
        <view class="preference-item">
          <text>出行方式：</text>
          <radio-group @change="onTransportChange">
            <radio :value="1" :checked="transport === 1">公交</radio>
            <radio :value="2" :checked="transport === 2">自驾</radio>
            <radio :value="3" :checked="transport === 3">步行</radio>
          </radio-group>
        </view>
        <view class="preference-item">
          <text>显示推荐景点：</text>
          <switch :checked="showRecommend" @change="onShowRecommendChange"></switch>
        </view>
        <view class="preference-item">
          <text>探索半径：{{ radius }}km</text>
          <slider :value="radius" @change="onRadiusChange" min="1" max="20"></slider>
        </view>
      </view>

      <!-- 6. 媒体展示（视频） -->
      <view class="section">
        <text class="section-title">城市宣传</text>
        <video src="/static/cityVideo.mp4" controls="true" class="video"></video>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 城市介绍富文本内容（支持HTML格式）
      cityIntro: `<div><p style="font-weight: bold;">泉州</p><p>泉州是国务院首批公布的24个历史文化名城之一，是古代"海上丝绸之路"起点，宋元时期被誉为"东方第一大港"。</p><p>著名景点有清源山、开元寺、泉州清净寺、崇武古城、洛阳桥等。</p><p style="color: blue;">拥有南音、木偶戏和闽南建筑等丰富的非物质文化遗产。</p></div>`,
      province: '福建省',
      city: '泉州市',
      area: '丰泽区',
      transport: 1, // 1-公交，2-自驾，3-步行
      showRecommend: true, // 是否显示推荐景点
      radius: 10 // 探索半径（km）
    };
  },
  methods: {
    // 省市区选择变化时触发
    onRegionChange(e) {
      this.province = e.detail.value[0];
      this.city = e.detail.value[1];
      this.area = e.detail.value[2];
    },
    // 出行方式选择变化时触发
    onTransportChange(e) {
      this.transport = parseInt(e.detail.value);
    },
    // 显示推荐景点开关变化时触发
    onShowRecommendChange(e) {
      this.showRecommend = e.detail.value;
    },
    // 探索半径滑块变化时触发
    onRadiusChange(e) {
      this.radius = e.detail.value;
    }
  }
};
</script>

<style scoped>
.city-explore-page {
  background-color: #f5f5f5;
}
.swiper {
  height: 300rpx; /* 轮播图高度，可根据需求调整 */
}
.swiper-img {
  width: 100%;
  height: 100%;
}
.section {
  margin: 20rpx;
  padding: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
}
.section-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}
.picker-view {
  padding: 20rpx;
  background-color: #f9f9f9;
  border-radius: 8rpx;
}
.preference-item {
  margin: 15rpx 0;
  display: flex;
  align-items: center;
}
.video {
  width: 100%;
  height: 400rpx; /* 视频高度，可根据需求调整 */
}
</style>